@(allThemes: List[Theme])
    
@import helper._

@main("CreateQuestion") {
@header()
    <br> <h2> <p class="text-info"> Creation d'une question </p></h2>    
        
    <fieldset>


	<form method="post" action="@routes.CreateQuestion.createQuestionE1">
	<input type="hidden" name="numQ" value="0">

	<div class="bs-docs-example" >
	
		<div class="bs-docs-example-after" >
		Etape 1 sur 3
		</div>
	 
	 	<legend> Question : informations generales </legend>
	 
				<label>Theme : </label>
				<div class="listeTheme control-group ">
     				 <div class="controls">
					<select name="theme" id ="theme">
					<option selected="selected" >Choisissez dans la liste</option>
					@for(theme <- allThemes){
					<option value=@theme.getIdTheme()>@theme.getLibelleT()</option>
					}
					</select>
						 <div class="alertlisteTheme alert alert-error hide">
		          <h4 class="alert-heading">Erreur !</h4>
		          Merci de bien vouloir selectionner un theme </div>
		      </div>
		    </div>	
					
				<div class="listeMatiere control-group ">
     				 <div class="controls">
				<label>Matiere : </label>
					<select name="matiere" id="matiere">
					<option selected="selected" ></option>
				</select>
				<div class="alertlisteMatiere alert alert-error hide">
		          <h4 class="alert-heading">Erreur !</h4>
		          Merci de bien vouloir selectionner un theme </div>
		      </div>
		    </div>	
		    
				<div class="listeChapitre control-group ">
     				 <div class="controls">
				<label>Chapitre : </label>
					<select id="chapitre" name="chapitre" >
					<option selected="selected"></option>
				</select>
				<div class="alertlisteChapitre alert alert-error hide">
		          <h4 class="alert-heading">Erreur !</h4>
		          Merci de bien vouloir selectionner un theme </div>
		      </div>
		    </div>	

	</div>		
	<a href="./accueil" class="btn btn-primary"><i class="icon-white icon-circle-arrow-left"></i> Retour Menu Principal</a>
	<button type="submit" class="btn btn-primary"> Etape suivante <i class="icon-white icon-circle-arrow-right"></i> </button>
	</form>
	<br>

</fieldset>

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    	    	
    	// SET Onchange function for themes
    	$('#theme').on('change',function(){
    		updateSelectBox('theme','matiere','http://localhost:9000/newqcm/server/listeMatiere/');
    	});
    	
    	// SET Onchange function for matieres
    	$('#matiere').on('change',function(){
    		updateSelectBox('matiere','chapitre','http://localhost:9000/newqcm/server/listeChapitre/');
    	});
    	
    })
    
    function updateSelectBox(sourceId,destId,url){
  	
  	// INIT
  	var html = '<option selected="selected" >Choisissez dans la liste</option>';
  	$('#box1View').html("");
  	$('#info').html("");
  	
  	// GET Value
  	var selectedValue = $('#'+sourceId+' option:selected').val();
  	if (sourceId == "theme"){$('#chapitre').html(html);}
  	
  	// SEND request
  	$.get(url+selectedValue, function(data) {
  		
  		// FIRST Split
  		var tabTemp = data.split(';');
  		
  		// BROWSE Theme
  		for(i=0;i<tabTemp.length;i++){
  			
  			// SECOND Split
  			var optionTab = tabTemp[i].split('#');
  			
  			// ADD to html
  			html += '<option value="'+optionTab[0]+'">'+optionTab[1]+'</option>';
  			
  		}
  		
  		// SET New content
  		$('#'+destId).html(html);
  	
  	});
  	
  }
  $(function(){
	    $("form").on("submit", function(){
	    	if ($("select[name='theme'] > option:selected").val() == "Choisissez dans la liste"){
	    		$("div.listeTheme").addClass("error");
	            $("div.alertlisteTheme").show("slow").delay(3500).hide("slow");
	            return false;
	    	}
	    	
	    	var mat = $("select[name='matiere'] > option:selected").val();
	    	if ( mat == "Choisissez dans la liste"  || (typeof mat === 'undefined')==true ||  mat == ""){
	    		$("div.listeMatiere").addClass("error");
	            $("div.alertlisteMatiere").show("slow").delay(3500).hide("slow");
	            return false;
	    	}
	    	
	    	var chap = $("select[name='chapitre'] > option:selected").val();
	    	if ( chap == "Choisissez dans la liste"  || (typeof chap === 'undefined')==true ||  chap == ""){
	    		$("div.listeChapitre").addClass("error");
	            $("div.alertlisteChapitre").show("slow").delay(3500).hide("slow");
	            return false;
	    	}
	    });
	  }); 


	</script>
}